import React from 'react';
import { Button, Card, Col, Divider, Input, Row, Select, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import styles from './index.less';
import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
interface DataType {
  key: React.Key;
  name: string;
  age: string;
  address: string;
  goodsName: string;
  else: string;
}

const columns: ColumnsType<DataType> = [
  {
    title: '操作',
    dataIndex: 'name',
    align: 'center',
    render: () => (
      <div className={styles.iconBox}>
        <EditOutlined className={styles.iconColor} />
        <DeleteOutlined className={styles.iconColor} />
      </div>
    ),
  },
  {
    title: '类别',
    dataIndex: 'else',
    align: 'center',
  },
];

const columns1: ColumnsType<DataType> = [
  {
    title: '操作',
    dataIndex: 'name',
    align: 'center',
    render: () => (
      <div className={styles.iconBox}>
        <a className={styles.iconColor}>编辑</a>
        <a className={styles.iconColor}>删除</a>
      </div>
    ),
  },
  {
    title: '产品名称',
    dataIndex: 'goodsName',
    align: 'center',
  },
  {
    title: '规格',
    dataIndex: 'age',
    align: 'center',
  },
  {
    title: '单位',
    dataIndex: 'name',
    align: 'center',
  },
];

const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: '12mm',
    address: 'New York No. 1 Lake Park',
    goodsName: '鸿盛双面胶',
    else: '家用电器',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: '12400',
    address: 'London No. 1 Lake Park',
    goodsName: '鸿盛文具胶',
    else: '日常用品',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 'YT',
    address: 'Sydney No. 1 Lake Park',
    goodsName: '晨光粘性标签',
    else: '办公设备',
  },
  {
    key: '4',
    name: 'Disabled User',
    age: '220g',
    address: 'Sydney No. 1 Lake Park',
    goodsName: '已旦木',
    else: '食品',
  },
  {
    key: '4',
    name: 'Disabled User',
    age: '2kg',
    address: 'Sydney No. 1 Lake Park',
    goodsName: '弹簧片',
    else: '服饰鞋包',
  },

];

const App: React.FC = () => {
  return (
    <div className={styles.wrap}>
      <Row gutter={[16, 16]}>
        <Col span={5}>
          <Card className={styles.card}>
            <div className={styles.leftBox}>
              <div className={styles.goods}>
                <Button type="link">产品分类</Button>
                <Button type="link">
                  <PlusOutlined /> 新增分类
                </Button>
              </div>
              <Divider />
              <Table columns={columns} dataSource={data} />
            </div>
          </Card>
        </Col>
        <Col span={19}>
          <Card>
            <div className={styles.rightBox}>
              <div className={styles.rightBox_title}>产品列表</div>
              <Divider />

              <div className={styles.rightBox_pros}>
                <Button className={styles.rightBox_btn} type="primary">
                  批量删除
                </Button>

                <div className={styles.selectBox}>
                  <Select
                    defaultValue="产品列表"
                    options={[{ value: '产品名称', label: '产品名称' }]}
                  />
                  <Input placeholder="请输入产品名称" />
                </div>
              </div>
              <Table columns={columns1} dataSource={data} />
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default App;
